<template>
	<div class="container">
		<el-card class="cart" shadow="always" :body-style="{ padding: '20px' }">
			<div slot="header">
				<h2>登录界面</h2>
			</div>
			<!-- 
                :model 表单数据源
                :rules 表单验证规则
                    - 绑定规则对象
                    - 定义具体表单项验证规则 
                         通过prop对应规则名 
                             它的值是 传入 Form 组件的 model 中的字段
                         自定义: 表单项验证规则
                ref  获取表单对象 this.$refs.loginForm
                        登录提交校验
                          this.$refs.loginForm.validate(valida => {
                                if (valida) {
                                    this.$message('登录成功!')
                                }
                            })
                        调用其它表单项校验规则
                           this.$refs.loginForm.validateField('checkpsw')
                        
             -->
			<el-form
				:model="user"
				ref="loginForm"
				:rules="rules"
				label-width="100px"
			>
				<!-- 用户名 -->
				<el-form-item label="用户名:" prop="name">
					<el-input
						v-model="user.name"
						suffix-icon="el-icon-edit"
					></el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item label="密码:" prop="password">
					<el-input v-model="user.password" show-password></el-input>
				</el-form-item>
				<!-- 确认密码 -->
				<el-form-item label="确认密码:" prop="checkpsw">
					<el-input v-model="user.checkpsw" show-password></el-input>
				</el-form-item>
				<!-- 验证码 -->
				<el-form-item label="验证码:" v-if="count >= 3">
					<el-input v-model="user.code" style="width: 60%"></el-input>
					<span v-html="codeUrl" @click="getCode"></span>
				</el-form-item>
				<!-- 记住密码 -->
				<el-form-item>
					<el-checkbox v-model="user.remember">记住密码</el-checkbox>
				</el-form-item>
				<!-- 提示信息 -->
				<el-form-item>
					<div>{{ message }}</div>
				</el-form-item>
				<!-- 按钮 -->
				<el-form-item>
					<el-button
						type="primary"
						@click="onSubmit"
						:loading="isLogin"
						>登录</el-button
					>
					<el-button @click="resetForm">重置</el-button>
					<el-button @click="onRegister">注册</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
import Sha256 from 'js-sha256' // 加密
import { RequestVerifyCode, RequestCheckCode, RequestLogin } from '@/api/user'
import { saveUser, removeUser, getUser } from '@/common/UserStore'
import { saveToken } from '@/common/TokenStore'
import { saveUserCookie } from '@/common/UserCookie'
export default {
	data() {
		//自定义表单验证规则
		const validatePass1 = (rule, value, callback) => {
			// if (value === '') {
			// 	callback(new Error('请输入密码！'))
			// } else {
			if (this.user.checkpsw !== '') {
				this.$refs.loginForm.validateField('checkpsw')
			}
			callback()
			// }
		}
		const validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码！'))
			} else if (value !== this.user.password) {
				callback(new Error('两次输入密码不一致!！'))
			} else {
				callback()
			}
		}
		return {
			rules: {
				name: [
					{ required: true, message: '请输入用户名', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					// {
					// 	min: 3,
					// 	max: 5,
					// 	message: '长度在 3 到 5 个字符',
					// 	trigger: 'blur'
					// }
					{ validator: validatePass1, trigger: 'blur' }
				],
				checkpsw: [{ validator: validatePass2, trigger: 'blur' }]
			},
			user: {
				name: '',
				password: '',
				checkpsw: '',
				code: '', //验证码输入数字
				remember: true
			},
			codeUrl: '', // 验证码图片
			message: '', // 提示信息
			count: 0, // 账号出错次数
			isLogin: false //登录加载中
		}
	},
	created() {
		let user = getUser() // 记住密码获取保存的用户信息显示到输入框
		// 如果已经保存用户名和密码，填充到输入框
		if (user) {
			this.user.name = user.username
			this.user.password = user.password
			this.user.checkpsw = user.password
		}
	},
	methods: {
		onSubmit() {
			//1.表单验证
			this.$refs.loginForm.validate(valida => {
				if (valida) {
					this.isLogin = true // 登录加载中
					// 是否三次输入错误密码
					if (this.count >= 3) {
						this.checkVerfifyCode()
					} else {
						//  登录业务接口
						this.getLogin()
					}
				}
			})
		},

		/**
		 * 登录业务
		 */
		async getLogin() {
			try {
				// 调用登录接口
				let data = await RequestLogin(
					this.user.name,
					Sha256(this.user.password)
				)
				let { resultCode, resultInfo, token } = data
				if (resultCode === 1) {
					// 1. 登录出错计数器清零
					this.count = 0
					// 2. 记住密码
					this.onRememberPassword(resultInfo.username)
					// 3. 保存token: 1>登录身份认证，2> 设置网络请求头authorization
					saveToken(token)
					// 4.保存用户头像、昵称和角色ID : 用于主界面显示和刷新界面重新获取菜单资源
					saveUserCookie({
						headerimg: resultInfo.headerimg,
						nick: resultInfo.nick,
						roleId: resultInfo.role_id
					})
					// 保存用户信息到store m_id和username
					this.$store.dispatch('saveUser', {
						m_id: resultInfo.m_id,
						username: resultInfo.username
					})

					// 5. 添加资源权限
					this.$store.dispatch('saveResource', resultInfo.role_id)
					// 6. 添加动态路由菜单
					this.$store
						.dispatch('saveMenu', resultInfo.role_id)
						.then(() => {
							this.$router.push({ path: '/' }) // 7. 跳转到主界面
						})
				} else {
					this.isLogin = false // 登录加载
					this.count = this.count + 1 // 登录出错的次数
					this.count >= 3 && this.getCode() // 生成验证码
					this.message = '用户名密码出错!'
				}
			} catch (err) {
				this.isLogin = false // 登录加载
			}
		},
		/**
		 *  记住密码业务
		 *   记住密码复选框是否选中
		 *      选中保存用户名和密码
		 *      否则删除用户名和密码
		 */
		onRememberPassword(username) {
			if (this.user.remember) {
				saveUser({
					username,
					password: this.user.password
				})
			} else {
				removeUser()
			}
		},
		/**
		 * 生成验证码
		 **/
		getCode() {
			RequestVerifyCode().then(data => {
				this.codeUrl = data
			})
		},
		/**
		 * 校验验证码
		 * 三次密码出错执行校验
		 */
		checkVerfifyCode() {
			RequestCheckCode(this.user.code).then(data => {
				if (data.resultCode !== 1) {
					this.message = '验证码不正确!'
					return
				}
				this.message = '' // 重置提示信息
				this.getLogin() //  登录业务
			})
		},
		/**
		 * 注册界面
		 */
		onRegister() {
			this.$router.push({ path: '/register' })
		},
		/**
		 * 重置表单
		 */
		resetForm() {
			this.$refs.loginForm.resetFields()
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	height: 100vh;
	background: url('@/assets/images/bg.jpg');
}
.cart {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 500px;
	div {
		h2 {
			text-align: center;
		}
	}
}
</style>
